import React, { Component } from 'react'
import {connect} from 'react-redux'
import {createAddPersonAction} from '../../redux/actions/person'

class Person extends Component {
	render() {
		return (
			<div>
				<h2>我是Person组件，上方求和为：{this.props.he}</h2>
				<input ref={c => this.userNameNode = c} type="text" placeholder="请输入人名"/>
				<input ref={c => this.userAgeNode = c} type="text" placeholder="请输入年龄"/>
				<button onClick={this.addPerson}>添加</button>
				<ul>
					{
						this.props.yiduiren.map((pObj)=>{
							return <li key={pObj.id}>{pObj.name}----{pObj.age}</li>
						})
					}
				</ul>
			</div>
		)
	}
	addPerson = ()=>{
		//获取人名
		const {value:name} = this.userNameNode
		const {value:age} = this.userAgeNode
		//通知redux添加一个人
		this.props.jiaYiRen({id:Date.now(),name,age})
	}
}

export default connect(
	state => ({
		he:state.he,
		yiduiren:state.rens
	}),
	{
		jiaYiRen:createAddPersonAction
	}
)(Person)
